<template>
	<view class="warp">
	<view class="tab">
		<view @click="changetab(0)" :class="tabnum==0?'active':'activeout'">
			转发记录
		</view>
	
		<view  @click="changetab(2)" :class="tabnum==2?'active':'activeout'">
			获客
		</view>
		 
	</view>
	<!--转发产品 -->
	<view class="product" v-if="tabnum==0">
	<!-- 商品列表 -->
		<view class="list">
			<view class="l_item" v-for="(item,index) in productlist" :key="index">
				<view class="time">
					<span>{{item.forwardTime}}</span>
					<span style="margin-right: 10rpx;margin-left: 10rpx;">转发了</span>
				<span style="color: #ee212d;" v-if="item.forwardType==0">商品</span>
				<span style="color: #ee212d;" v-if="item.forwardType==1">视频</span>
				<span style="color: #ee212d;" v-if="item.forwardType==2">图文</span>
				<span @click="toinfo(item)" style="margin-left: 10rpx;font-size: 28rpx;color:#fe9a22 ;">{{item.goodsName}}</span>
				</view>
				
			</view>
		</view>
	</view>
	
	<view class="customer" v-if="tabnum==2">
		<view class="customer_list">
			<view class="customer_item" v-for="(item,index) in customerlist" :key="index">
				<view class="item_top">
					<view class="i_left">
						<image  style="width: 36rpx; height: 36rpx; border-radius: 50%;" :src="item.avatar"></image>
					     <view class="i_text">
					     	
							<span style="color: #ee212d;margin-left: 6rpx;">{{userCenterData.memberName}}</span>
							
					     </view>
					</view>
				<!-- 	<view class="i_right">
						<span>所属</span>
						<span>{{userCenterData.memberName}}</span>
						<span>销售员</span>
						<uni-icons type="right" color="#656565" size="30rpx"></uni-icons>
					</view> -->
				</view>
				<view class="item_card">
					<view class="c_top">
						<image style="width: 36rpx; height: 36rpx; border-radius: 50%;" :src="item.avatar"></image>
					 <view class="c_t_right">
						<view class="top">
							<view class="top_left" @click="tocustomerinfo(item)">
								<view class="name">
									{{item.customerName}}
								</view>
								<view class="status" v-if="item.followList.length!=0">
									跟进中
								</view>
								<view class="statusover" v-else>
									未跟进
								</view>
							</view>
							
							<!-- <view class="top_right" @click="addcustomer(item)">
								添加跟进
							</view> -->
						</view>
						<view class="source"  @click="tocustomerinfo(item)">
							<span>来源:</span>
							<span style="margin-left: 20rpx;">小程序</span>
						</view>
						<view class="adress"  @click="tocustomerinfo(item)">
							定位:<span style="margin-left: 20rpx;">{{item.phoneAddress}}</span>
						</view>
						<view class="num"  @click="tocustomerinfo(item)">
							<!-- <span>成交额</span>
							<span>20000</span>
							<span>|</span>
							<span>订单</span>
							<span>10</span> -->
							电话: <span style="margin-left: 20rpx;">{{item.phoneNum}}</span>
						</view>
					</view>
					</view>
					<!-- <view class="c_bottom">
						<view class="b_left">
							浏览商品
							<span style="margin-left: 10rpx;">5</span>
						</view>
						<view class="b_right">
							浏览视频
							<span style="margin-left: 10rpx;">3</span>
						</view>
					</view> -->
				</view>
				<view class="item_records"  @click="tocustomerinfo(item)">
					<view class="record_list">
						<view class="list_item" v-for="(val,index) in item.browList.slice(0,3)">
							<view class="top_text">
								<span style="font-family: PingFang-SC-Regular;">通过</span>
								<span>{{val.scoreUsername}}</span>
								<!-- <span>[最近使用]</span> -->
								<span>浏览了商品</span>
								<span style="color: burlywood;margin-left: 10rpx;">{{val.browGoods}}</span>
								
							</view>
							<view class="bottom_text">
								<span>最近访问:</span>
								<span >{{val.browCreatedTime}}</span>
								<span style="display: block;">(停留时长：{{val.browTime}} s）</span>
								
							</view>
						</view>
						<view class="" v-if="item.browList.length>3">
							...... 
						</view>
					</view>
				</view>
				<view class="phone">
					<view class="left">
						联系电话：{{item.phoneNum}}
					</view>
					<!-- <view class="right" @click="changecustomer(item)" v-if="item.cusDealOrNot==1">
						转成交
					</view> -->
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
			mapState,
			mapMutations
		} from 'vuex'
	export default {
		data() {
			return {
				tabnum:0,
				productlist:[],
				
				ptotal:0,
				customerlist:[],
				queryform:{
					taskId:"",
					indexId:"",
					userId:""
				},
				 
			};
		},
		onLoad(e) {
			 
		   let item=decodeURIComponent(e.item)
			this.queryform.taskId=JSON.parse(item).taskId
			this.queryform.indexId=JSON.parse(item).id
			this.queryform.userId= JSON.parse(item).userId
			this.getproductlist()
			this.getcustomerlist()
		},
		computed: {
					...mapState(['hasLogin', 'userInfo', 'userCenterData']),
					},
		methods:{
			
			changetab(val){
				this.tabnum=val
			},
			// 获取转发记录
			getproductlist(){
				
				this.$request({
					url:'v3/customer/front/appForwardRecord/leader/page',
					method:'GET',
					data:this.queryform
				}).then(res=>{
				 
					this.productlist=res.data.list
					this.ptotal=res.data.pagination.total

				})
			},
			getcustomerlist(){
			
			this.$request({
				url:'v3/customer/front/appCustomer/page',
				method:'GET',
				data:this.queryform
			}).then(res=>{
				this.customerlist=res.data.list
			})
			},
			// 商品或视频详情
			toinfo(val){
				if(val.forwardType==0){
					uni.navigateTo({
						url:"/standard/product/detail?productId="+val.productId+'&goodsId='+val.goodsId
					})
				}else if(val.forwardType==1){
					
				}
			},
			// 客户详情
			tocustomerinfo(val){
				uni.navigateTo({
					url:"/standard/customerinfo/customerinfo?id="+val.id
				})
			},
			
		}
	}
</script>

<style lang="scss">
.warp{
	background-color: #f5f5f5;
	.tab{
		padding: 10rpx 20%;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		border-bottom: 2rpx solid #cecece;
		.active{
			padding-bottom: 10rpx;
			border-bottom: 6rpx solid #fe9a22;
		}
	}
	.list{
		.l_item{
			margin-top: 10rpx;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 15rpx;
			box-shadow: 0rpx 0rpx 15rpx #ebebeb;
		}
	}
	
	
	
	.customer_list{
		padding: 0 30rpx;
		margin-top: 20rpx ;
	
		.customer_item{
			background-color: #fff;
			padding: 30rpx;
			border-radius: 10rpx;
			margin-bottom: 15rpx;
			.item_top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #eeeeee;
				.i_left{
					display: flex;
					.i_text{
						margin-left: 10rpx;
						font-size: 24rpx PingFang-SC-Medium;
					}
					
				}
				.i_right{
						color: #656565;
					}
			}
			.item_card{
				margin-top: 36rpx;
				
				
				.c_top{
					display: flex;
				padding: 10rpx;
					.c_t_right{
						margin-left: 20rpx;
						.top{
							display: flex;
							justify-content: space-between;
								width: 520rpx;
							.top_left{
								display: flex;
								
								.name{
									margin-right: 20rpx;
									font: 28rpx PingFang-SC-Medium;
								}
								.statusover{
									width: 92rpx;
									height: 36rpx;
									border: 2rpx solid #cecece;
									border-radius: 10rpx;
									text-align: center;
									line-height: 36rpx;
									font: 24rpx PingFang-SC-Regular;
									color: #cecece;
								}
								.status{
									width: 92rpx;
									height: 36rpx;
									border: 2rpx solid #fe4a55;
									border-radius: 10rpx;
									text-align: center;
									line-height: 36rpx;
									font: 24rpx PingFang-SC-Regular;
									color: #fd4852;
								}
								
							}
							.top_right{
								font-size: 26rpx;
								width: 144rpx;
								height: 44rpx;
								background-color: #fe4a55;
								color: #ffffff;
								text-align: center;
								line-height: 44rpx;
								border-radius: 22rpx;
							}
						}
						.source,.adress,.num{
							font: 24rpx PingFang-SC-Regular;
							margin-top: 20rpx;
						}
					}
				}
				.c_bottom{
					display: flex;
					margin-top: 60rpx;
					padding-bottom: 30rpx;
						
					.b_left,.b_right{
						background-color: #fd4953; 
						padding: 10rpx 25rpx;
						border-radius: 10rpx;
						color: #ffffff;
					}
					.b_left{
						margin-right: 30rpx;
					}
				}
				
			}
		}
		.item_records{
			.record_list{
				.list_item{
					font: 24rpx PingFang-SC-Regular;
					padding: 30rpx 0;
					border-top: 2rpx solid #eeeeee;
					// border-bottom: 2rpx solid #eeeeee;
					.top_text{
						font: 24rpx PingFang-SC-Medium;
					}
					.bottom_text{
						color: #656565;
					}
				}
			}
		}
		.phone{
			padding-top: 30rpx;
			border-top: 2rpx solid #eeeeee;
			display: flex;
			justify-content: space-between;
			font: 24rpx PingFang-SC-Medium;
			color: #ee212d;
		}
	}
}
</style>
